
<template>
  <el-form
    ref="form"
    v-bind="config.formProps"
    :model="model"
    :rules="config.rules"
  >
    <template v-if="config.formProps.row == true">
      <el-row v-bind="config.formProps">
        <el-col
          :span="item.props.span*1"
          v-for="(item, index) in props.config.formItems"
          :key="index"
          class="col"
        >
          <el-form-item v-bind="item.props" @click="formItemClick(item)" class="form-item">
            <component
              ref="son"
              :is="item.name"
              :options="item.options"
              :elProps="item.elProps"
              v-model="model[item.props.prop]"
              class="component"
            >
            </component>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
    <template v-else>
      <div v-for="(item, index) in props.config.formItems" :key="index">
        <el-form-item v-bind="item.props" @click="formItemClick(item)">
          <component
            ref="son"
            :is="item.name"
            :options="item.options"
            :elProps="item.elProps"
            v-model="model[item.props.prop]"
          >
          </component>
        </el-form-item>
      </div>
    </template>
  </el-form>
</template>

<script setup>
import { ref, onMounted, reactive, watch, watchEffect, nextTick } from "vue";
import bus from "@/common/bus.js";

const props = defineProps({
  config: {
    type: Object,
    default: () => {},
  },
  echo: Object,
});

let model = reactive({});
const form = ref(null);
const son = ref(null);
props.config.formItems.forEach((item) => {
  console.log(item);
  model[item.props.prop] = item.value;
});
watchEffect(async ()=>{
  if (props.echo) {
    // for (let i in props.echo) {
    //   model[i] = props.echo[i];
    // }
    model = Object.assign(model,props.echo)
    // console.log(model);
  }
})
// 提交
const submit = (cb) => {
  form.value.validate().then((res) => {
    cb(model);
    // bus.emit("DiologFromButton", model);
  }).catch(e=>{console.log(e)});
};
const formItemClick = (item) => {
  // console.log(item);
};
defineExpose({
  submit,
});
</script>

<style lang='less' scope>
.el-form-item {
  margin-bottom: 0;
}
.component{
  width: 90%;
  flex:1
}
</style>
